import Footer from '../../components/footer/footer';
import React, { useState, useEffect } from 'react';
import '../../css/my.css';
import { List, Image } from 'antd';
import {
  BookOutlined,
  PlusSquareOutlined,
  RightOutlined,
  FileDoneOutlined,
  WalletOutlined,
  UnorderedListOutlined,
  SettingOutlined,
  ChromeOutlined
} from '@ant-design/icons';
function My() {
  useEffect(() => {
  }, [])
  const data = [
    { name: 'Name', icon: <BookOutlined />, icon1: <RightOutlined /> },
    { name: 'DOB', icon: <PlusSquareOutlined />, icon1: <RightOutlined /> },
    { name: 'Gender', icon: <PlusSquareOutlined />, icon1: <RightOutlined /> },
    { name: 'Phone Number', icon: <FileDoneOutlined />, icon1: <RightOutlined /> },
    { name: 'Email', icon: <WalletOutlined />, icon1: <RightOutlined /> },
    { name: 'Address', icon: <UnorderedListOutlined />, icon1: <RightOutlined /> },
    { name: 'Change Password', icon: <SettingOutlined />, icon1: <RightOutlined /> }
  ];
  const jump = (item) => {
    console.log(`跳转到${item}页面`);
  }
  return (
    <div className="App">
      <div className='imgbox'>
        <div className='headerBox'>
          <ChromeOutlined style={{ position: 'absolute', right: '24px' }} />
          <div>
            <Image
              className='image'
              width={60}
              height={60}
              src='https://img0.baidu.com/it/u=2469387178,1962340570&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1704906000&t=3f26944c71ca1175d5c9b56997438979'
            />
          </div>
          <div>
            <div style={{ height: '40px', width: '100px', textAlign: 'center', lineHeight: '40px' }}>MKSHDKSLD</div>
            <div style={{ height: '20px', width: '100px', textAlign: 'center', lineHeight: '18px', borderRadius: '15px', backgroundColor: '#897ef3' }}>认证教练</div>
          </div>
        </div>
        <ul className='imgboxul' style={{ width: '60%', display: 'flex' }}>
          <li>
            <div className='imgboxulli'>12</div>
            <span>动态</span>
          </li>
          <li>
            <div className='imgboxulli'>16</div>
            <span>关注</span>
          </li>
          <li>
            <div className='imgboxulli'>123.5w</div>
            <span>粉丝</span>
          </li>
        </ul>
        <div className='imgboxson'>
          运动生涯
          <ul style={{ display: 'flex' }}>
            <li>
              <div className='lidiv'>9.68w</div>
              <span>KCAL</span>
            </li>
            <li>
              <div className='lidiv'>966</div>
              <span>MIN</span>
            </li>
            <li>
              <div className='lidiv'>156</div>
              <span>DAY</span>
            </li>
          </ul>
        </div>
      </div>
      <List
        style={{ backgroundColor: 'white', margin: '10px' }}
        bordered
        dataSource={data}
        renderItem={(item) => (
          <List.Item onClick={() => jump(item.name)}>
            {item.icon}
            <List.Item.Meta style={{ marginLeft: '.625rem' }}
              description={<span style={{ color: 'black' }}>{item.name}</span>}
            />
            {item.icon1}
          </List.Item>
        )}
      />
      <Footer />
    </div>
  );
}

export default My;
